<template>
    <div>
        <div class="form-window">
            <div class="form-window-line"></div>
            <div class="form-window-txt">营业场所信息</div>

        </div>
        <div class="form-form">
            <el-form label-position="left" label-width="140px" size="small">

                <el-form-item label="营业场所邮编">
                    <div>
                        <el-input :disabled="edit" v-model="premises.no" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="营业场所省市区">
                    <div>
                        <el-cascader :disabled="edit" :options="optionsAddress" class="form-input" :props="propsAddress"
                            @change="changeAddress" :placeholder="text ? text : '请选择'"></el-cascader>
                    </div>
                </el-form-item>
                <el-form-item label="详细地址">
                    <div>
                        <el-input :disabled="edit" v-model="premises.address" class="form-input"
                            placeholder="请输入"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="营业场所面积(㎡)">
                    <div>
                        <el-input :disabled="edit" v-model="premises.area_num" placeholder="请输入"
                            class="form-input"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="营业场所结构">
                    <el-button :disabled="edit" size="small" @click="clickTabs(index)"
                        :class="premises.structure == item ? 'com-btn' : ''" v-for="(item, index) in structure"
                        :key="'djf' + index">{{
                            item }}
                    </el-button>
                </el-form-item>
                <el-form-item label="营业性质">
                    <div>
                        <el-select :disabled="edit" v-model="premises.nature" placeholder="请选择" class="form-input">
                            <el-option v-for="item in nature" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>

                    </div>
                </el-form-item>
            </el-form>
            <div class="form-btn-box">
                <el-button size="small" @click="updateInfoItem(12)">修改</el-button>
                <el-button size="small" class="com-btn" @click="saveStorage(12)">保存
                </el-button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        edit: { type: Boolean, default: false },
        optionsAddress: {},
        propsAddress: {},
        premises: {}
    },
    data() {
        return {
            tabs: [
                {
                    name: "钢筋混泥土",
                    isActive: true,
                },
                {
                    name: "砖混结构",
                    isActive: false,
                }
            ],
            param: {
                name: "",
                cardType: "身份证",
                card_no: "",
                mobile: "",
                address: "",
                email: ""
            },
            nature: [],
            structure: []
        }
    },
    mounted() {
        this.getData()
    },
    computed: {
        text: function () {
            if (this.premises.province) {
                return this.premises.province + '/' + this.premises.city + '/' + this.premises.area
            }
            return ''
        },

    },
    methods: {
        getData() {
            this.ajaxs('order/shopConfig', {
                success: (res) => {
                    this.nature = res.msg.nature;
                    this.structure = res.msg.structure;

                    console.log(res);
                }
            })
        },
        //修改
        updateInfoItem(index) {
            this.$emit('updateInfoItem', index)
        },
        //保存
        saveStorage(index) {
            this.$emit('saveStorage', index)
        },
        clickTabs(index) {
            this.structure.forEach((item, i) => {
                if (i == index) {
                    this.premises.structure = item;
                }
            })
        },
        handleChange() {

        },
        //选择省市区时间
        changeAddress(e) {
            this.premises.province = e[0];
            this.premises.city = e[1];
            this.premises.area = e[2];
            console.log(e);
        }
    }
}
</script>
<style scoped>
@import "../../../assets/css/index/form.css";
</style>